<template>
	<view class="bg-[#2C326B] rounded-lg mx-[30rpx] py-[30rpx] px-[30rpx]" v-if="navs.length>0">
		<view class="">
			<view v-for="(item, index) in navs" :key="index" class="flex justify-between items-center"
				:class="index<(navs.length-1)?'mb-[30rpx]':''" @click="handleClick(item.link)">
				<view class="flex justify-start items-center">
					<u-image width="26px" height="26px" :src="item.image" alt="" />
					<view class="ml-[30rpx]">{{ item.name }}</view>
				</view>
				<view class="">
					<u-icon color="#A1DBF5" size="32" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { navigateTo, jumpTo } from '@/utils/util'

	const props = defineProps({
		navs: {
			type: Object,
			default: () => ({})
		},
	})

	const handleClick = (link : any) => {
		let linkArr = {}
		if (link.indexOf('http') == 0) {
			jumpTo(link)
		} else {
			linkArr = { path: link }
		}
		navigateTo(linkArr)
	}
</script>

<style lang="scss"></style>